// 1、相等运算
$size:1100px;
$colorValue:red;
$colorContain:'container';
@if $size==1200px{
    .box1{
        width: 100px;
    }
}
@if $size != 1200px{
    .box1{
        width: 200px;
    }
}
@if $colorValue!=yellow{
    .box2{
        color: blue;
    }
}
@if $colorContain=='container'{
    .box2{
        background:red
    }
}
// 2、数值运算 加减乘除取余 由于运算符在css中可能有特殊意义，所以此处运算时要在运算符两侧加上空格
$operation-width:100px;
$operation-size:1em;
$operation-size2: 2rem;
.box3{
    width: $operation-width - 20;
    height: $operation-width + 100;
    margin-top:$operation-width / 10;
    margin-bottom:$operation-width * 0.5;
    padding-left:$operation-width % 3px;
}
.box4{
    border-right: $operation-size*2 solid #000;
    margin-right:$operation-size2*3;
}
// 提供了额外的数学函数供数字运算 ceil floor percentage round min max
.box5{
    font-size: ceil(10px / 3);// 向上取值
    width: percentage(1 / 2);// 转成百分比
    height: floor(10px / 3); // 向下取值
    margin-top: round(20px / 3); // 四舍五入
    margin-right: min(10px, 5px ,6px, 3px); //  取最小值
    margin-left: max(10px, 5px, 6px, 3px); // 取最大值
    padding-top: abs(-15px);// 取绝对值

}

// 3、颜色运算、函数对颜色运算
// adjust-color($color,$red:0,$green:0,$blue:0) 对颜色加减运算
// mix($color1,$color2,percent) 对颜色混合
// lighten($color, percent) 对颜色加亮
// darken($color, percent) 对颜色加暗
$imRed:rgb(255,0,0);// 或者red或者#f00都行
.box6{
    // 对颜色加法运算 rgb(255,0,0)=>rgb(255+50=255已经是最大值了,0+50=50,0+50=50)=>rgb(255,50,50)
    color:adjust-color($imRed,$red:50,$green:50,$blue:50);
    // 对颜色的减法运算rgb(255,0,0)=>rgb(255-50=205,0-50=0,0-50=0)=>rgb(205,0,0)
    color:adjust-color($imRed,$red:-50,$green:-50,$blue:-30);
    // 对颜色混合rgb(255*0.8+200*0.2=244, 0*0.8+100*0.2=20,0*0.8+100*0.2=20）=>rgb(244,20,20)
    color: mix($imRed,rgb(200,100,100),80%);
    // 加亮颜色
    color:lighten($imRed, 20%);
    // 加深颜色
    color:darken($imRed, 20%);
}

// 4、字符串运算
$content:"im content";
$stringName:"box";
$stringColor:"color";
.box7::after{
    content:$content + "这是一个伪元素";
    border-#{$stringColor}:red;
}
.#{$stringName}8{
    background-#{$stringColor}:blue;
}
// 5、布尔运算与and 或or 非not
@if 1==1 and true{
    .box9{
        color:red;
    }
}
@if 1==1 and false{
    .box9{
        font-size: 15px;
    }
}
@if true or 1==2{
    .box9{
        font-size:20px;
    }
}
@if not (1==2){
    .box9{
        background:yellow;
    }
}